<template>
  <el-tag 
    :type="getLevelType(level)" 
    :effect="effect"
    :size="size"
    class="customer-level-badge"
  >
    <el-icon v-if="showIcon" class="level-icon">
      <component :is="getLevelIcon(level)" />
    </el-icon>
    {{ getLevelText(level) }}
  </el-tag>
</template>

<script setup lang="ts">
import { Star, User, Flag } from '@element-plus/icons-vue'

interface Props {
  level: string
  size?: 'small' | 'large' | 'default'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

const getLevelType = (level: string) => {
  const typeMap: Record<string, any> = {
    vip: 'danger',
    important: 'warning',
    normal: 'primary',
    new: 'success'
  }
  return typeMap[level] || 'info'
}

const getLevelIcon = (level: string) => {
  const iconMap: Record<string, any> = {
    vip: Star,
    important: Star,
    normal: User,
    new: Flag
  }
  return iconMap[level] || User
}

const getLevelText = (level: string) => {
  const textMap: Record<string, string> = {
    vip: 'VIP',
    important: '重要',
    normal: '普通',
    new: '新客户'
  }
  return textMap[level] || level
}
</script>

<style scoped lang="scss">
.customer-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  
  .level-icon {
    font-size: 12px;
  }
  
  &.el-tag--danger {
    animation: pulse-vip 2s infinite;
  }
}

@keyframes pulse-vip {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; box-shadow: 0 0 8px rgba(245, 34, 45, 0.4); }
}
</style>